<template>
  <div class="header">
<p class="title">待办事项</p>
<input 
type="text" placeholder="请输入" 
class="new-todo" 
v-model="name"
@keyup.enter="enterName"
/>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const emit=defineEmits(["addToDo"]);
const name = ref("");
function enterName(){
emit("addToDo",name.value);
name.value = "";
}
</script>

<style scoped>
.header {
box-shadow: opx 2px 4px 0px black;
}
.title {
font-size: 30px;
font-weight: bold;
text-align: center;
color:red;
}
.new-todo {
width: 100%;
height: 30px;
box-shadow: inset opx 2px 1px #ddd;
padding: 6px 18px;
}
</style>